<template>
	<view class="car">
		<view class="aa">
			<view class="top">
				<text class="phone">上传行驶证</text>
				<text class="phone" style="float: right;">上传车身正面照</text>
				<view class="load">
					<u-upload :action="action"></u-upload>
					<u-upload :action="action1"></u-upload>
				</view>
			</view>
		</view>
		<view class="between">
			<view class="bind">
				绑定车辆
			</view>
			<view class="checkbox">
				<view :class="zhi.includes(item)?'change1':'change'" v-for="(item,index) in list" :key="index" @click="check(item)">
					{{item}}
				</view>
			</view>
			<view class="line"></view>
			<view class="line2">
				<text>车牌号</text>
				<input type="text" value="" placeholder="输入车牌号码" :disabled="true" @click="window(1)" v-model="chepaihao"/>
			</view>
			<view class="window" v-if="active==1">
				<view class="shuru">
					<view class="pleace">
						请输入车牌号
					</view>
					<view class="" @click="close">
						<image src="../../static/img/plate_close.png" mode=""></image>
					</view>
				</view>
				<view class="number">
					<view class="view">
						<view class="view1" @click="show = true">{{haoma}}</view>
						<input type="text" value="" class="view2" v-model="val[0]" maxlength="1" ref="input1"/>
					</view>
					<view class="dian"></view>
					<input type="text" value="" class="num" v-model="val[1]" maxlength="1" ref="input2"/>
					<input type="text" value="" class="num" v-model="val[2]" maxlength="1" ref="input3"/>
					<input type="text" value="" class="num" v-model="val[3]" maxlength="1" ref="input4"/>
					<input type="text" value="" class="num" v-model="val[4]" maxlength="1" ref="input5"/>
					<input type="text" value="" class="num" v-model="val[5]" maxlength="1" ref="input6"/>
					<input type="text" value="" class="num1" v-model="val[6]" maxlength="1" ref="input7"/>
				</view>
				<view class="yes" @click="ok">
					确认
				</view>
			</view>
			<u-keyboard ref="uKeyboard" mode="car" v-model="show" :mask="false" @change="confirm"></u-keyboard>
		</view>
		<view class="bottom">
			<view class="withdrawal">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "car",
		data() {
			return {
				chepaihao:'',
				list:[
					"电驴","货车","微型车","中货车","摩托车","空运","111"
				],
				action: '#',
				action1: '#',
				show: false,
				active: '',
				haoma: "",
				zhi:[],
				val:[],
			}
		},
		methods: {
			ok() {
				this.chepaihao=this.haoma+this.val.join("").toLocaleUpperCase();
				if((this.haoma+this.val.join("").toLocaleUpperCase()).length==8){
					this.active=0;
				}
			    console.log(this.val.join("").toLocaleUpperCase());
			},
			check(name){
				if(this.zhi.indexOf(name)>-1){
				    this.zhi.splice(this.zhi.indexOf(name),1);
				}else{
				    this.zhi.push(name)
				}
				console.log(this.zhi);
			},
			close() {
				this.active = 0;
			},
			window(val) {
				this.active = val;
			},
			confirm(val) {
				console.log(val)
				this.haoma = val;
			},

		}
	}
</script>

<style scoped>
	.line2 {
		display: flex;
		flex-direction: row;
		padding-bottom: 30rpx;
		margin-top: 5%;
	}
	
	.line2 text {
		font-size: 30rpx;
		font-weight: 600;
	}
	
	.line2 input {
		text-align: right;
		margin-left: 27%;
	}
	.line{
		width: 100%;
		border-bottom: 2rpx solid rgb(204,204,204);
	}
	.change1{
		width: 110rpx;
		padding: 10rpx;
		text-align: center;
		border: 2rpx solid rgb(222, 222, 222);
		background-color: rgb(3,169,245);
		color: #FFFFFF;
		margin: 1% 3%;
	}
	.change{
		width: 110rpx;
		padding: 10rpx;
		text-align: center;
		border: 2rpx solid rgb(222, 222, 222);
		background-color: rgb(247, 247, 247);
		margin: 1% 3%;
	}
	.checkbox{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 5% 0;
	}
	.bind{
		font-size: 30rpx;
		font-weight: 600;
	}
	.yes {
		width: 90%;
		padding: 20rpx;
		border: 2rpx solid rgb(222, 222, 222);
		background-color: rgb(247, 247, 247);
		color: rgb(172, 172, 172);
		border-radius: 6rpx;
		margin: 0 auto;
		text-align: center;
	}

	.num1 {
		width: 60rpx;
		height: 60rpx;
		border-radius: 6rpx;
		text-align: center;
		border: 2rpx dashed rgb(151, 151, 151);
	}

	.num {
		width: 60rpx;
		height: 60rpx;
		border-radius: 6rpx;
		border: 2rpx solid rgb(151, 151, 151);
		text-align: center;
	}

	.dian {
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		background-color: rgb(151, 151, 151);
	}

	.view2 {
		width: 50%;
		text-align: center;
	}

	.view1 {
		width: 55%;
		border-right: 2rpx solid rgb(151, 151, 151);
		text-align: center;
	}

	.view {
		border: 1px solid rgb(151, 151, 151);
		border-radius: 6rpx;
		width: 120rpx;
		height: 66rpx;
		display: flex;
		flex-direction: row;
		padding: 12rpx;
	}

	.number {
		display: flex;
		flex-direction: row;
		width: 90%;
		align-items: center;
		justify-content: space-between;
		margin: 4% auto;
	}

	.pleace {
		font-size: 34rpx;
		font-weight: 600;
	}

	.shuru image {
		width: 50rpx;
		height: 50rpx;
	}

	.shuru {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.window {
		background-color: #FFFFFF;
		width: 87%;
		margin: 0 auto;
		height: 300rpx;
		padding: 24rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.car {
		background: rgb(238, 238, 238);
		height: 1250rpx;
	}

	.aa {
		display: flex;
	}

	.top {
		width: 95%;
		height: 400rpx;
		background-color: #FFFFFF;
		margin: 0 auto;
		margin-top: 3%;
		padding: 24rpx;
	}

	.phone {
		font-weight: 600;
		font-size: 32rpx;
	}

	.load {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		padding-top: 60rpx;
	}

	.between {
		width: 95%;
		height: 460rpx;
		background-color: #FFFFFF;
		margin: 0 auto;
		margin-top: 3%;
		padding: 24rpx;
	}

	.bottom {
		margin: 0 auto;
		width: 94%;
		margin-top: 25%;
	}

	.withdrawal {
		width: 100%;
		height: 80rpx;
		border-radius: 20px;
		margin-bottom: 5%;
		text-align: center;
		padding-top: 12px;
		color: #FFFFFF;
		background-image: linear-gradient(to right, rgb(53, 199, 233), rgb(30, 141, 255));
	}
</style>
